import React from 'react';
import { Input, Button, TablePaginationConfig, Space, Table, Modal, Form, Select, notification, Row, Col } from 'antd';
import { useNavigate } from 'react-router-dom';
import type { ColumnsType } from 'antd/es/table';
import { useEffect, useState } from 'react';
import '../../styles/lzn/LossList.scss';
import { type_list, type_del, type_edit, type_add } from '../../utils/api/index';
import { setConstantValue } from 'typescript';
// import { useLossList } from '../../hooks/lzn'
// import Item from 'antd/es/list/Item';
interface Props {

}

interface DataType {
    key: string;
    id: number;
    type_name: string;
    type_status: string;
}

// const lossList: Type[] = [];
// var [lossList, uselossList] = useLossList([])

//*获取表单实例
var { useForm } = Form

function LossList(props: Props) {
    var [lossList, uselossList] = useState([]);
    var navigate: any = useNavigate()
    const columns: ColumnsType<DataType> = [
        {
            title: '损益类型ID',
            dataIndex: 'key',
            key: 'key',
        },
        {
            title: '损益名称',
            dataIndex: 'type_name',
            key: 'type_name',
        },
        {
            title: '损益类型状态',
            dataIndex: 'type_status',
            key: 'type_status',
        },
        {
            title: '操作',
            key: '10',
            render: (_, record) => (
                <Space size="middle">
                    <a onClick={() => { handleClickEdit(record) }}>编辑</a>
                </Space>
            ),
        },
    ];
    //  ================================
    //删除列表项
    var del = (record: any) => {
        console.log(record)
        type_del(record.id).then((res) => {
            console.log(res.data);
        })
    }
    //============================ 编辑损益管理单个信息===============
    //*编辑
    var [isbianji, setisBianji] = useState(false)
    // 编辑单个信息
    var handleClickEdit = (record: any) => {
        console.log(record);
        record = JSON.parse(JSON.stringify(record))
        setisBianji(true)
        // record.role = record.id
        console.log(record);
        form.setFieldsValue(record)
    }
    //*编辑隐藏弹出框
    var handlebianji = () => {
        setisBianji(false)
    }
    //*获取form 实例 
    var [form] = useForm()
    //*更改请求
    var onBianji = (record: any) => {
        type_edit(record).then((res) => {
            console.log(res.data);
            notification.success({ message: ["修改成功"] });
        })
        handlebianji()
    }
    // ======查看详情======================================
    const [isModalOpen, setIsModalOpen] = useState(false);
    // 详情:
    const [xiangqing, setXiangqing] = useState({
        key: 3,
        create_people: "",
        create_name: "",
        sun_type: "",
        sun_time: "",
        shen_people: "",
        shen_time: "",
        sun_reason: "",
        status: "",
    })
    const handleClickDetail = (record: any) => {
        console.log(record);
        setXiangqing(record)
        setIsModalOpen(true);
    };

    const handleOk = () => {
        setIsModalOpen(false);
    };
    // =================================================

    //损益列表渲染
    useEffect(() => {
        type_list().then((res) => {
            console.log(res.data)
            uselossList(res.data)
        })
    }, [])
    //分页
    interface TableParams {
        pagination?: TablePaginationConfig;
    }
    const [tableParams, setTableParams] = useState<TableParams>({
        pagination:
        {
            current: 1,
            pageSize: 10,
        },
    });
    const handleTableChange = (
        pagination: TablePaginationConfig,
    ) => {
        setTableParams({
            pagination
        });
    };

    return (
        <div>
            <div className='input'>
                <Input placeholder="请输入损益类型名称" />
                <Input placeholder="请选择损益类型状态" />
                <Button type="primary">搜索</Button>
                <Button type="primary">创建</Button>
            </div>
            {/* //表格 */}
            <Table
                columns={columns}
                dataSource={lossList}
                className="table"
                pagination={tableParams.pagination}
                onChange={handleTableChange}
            />
            {/* =======编辑弹出框============= */}
            <Modal title="编辑" open={isbianji} closable={false} footer={[<Button onClick={() => { handlebianji() }} >取消</Button>]} >
                <Form
                    form={form}
                    labelCol={{ span: 6 }}
                    wrapperCol={{ span: 16 }}
                    onFinish={onBianji}
                >
                    <Form.Item
                        label="损益类型ID"
                        name="key"
                        rules={[{ required: true, message: '请输入单号' }]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        label="损益名称"
                        name="type_name"
                        rules={[{ required: true, message: '请输入创建人员' }]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        label="损益状态类型"
                        name="type_status"
                        rules={[{ required: true, message: '请输入创建名称' }]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                        <Button type="primary" htmlType="submit" onClick={() => { }}>
                            确认编辑
                        </Button>
                    </Form.Item>
                </Form>
            </Modal>
            {/* ================================= */}

            {/* ===================== */}
        </div>
    );
}

export default LossList;